<template>
	<view class="store">
		<!-- position: fixed; -->
		<view class="" style="width: 100%; background: url(https://sz.vvv5g.com/assets/img/wxImg/store_top.png); background-size: 100% auto; position: fixed; top: 0; z-index: 999">
			<view class="topFixed" style="background: rgb(235, 190, 135)">
				<view class="" :style="'height:' + navBarInfo.statusBarHeight + 'px;'"></view>
				<view class="flex align-center justify-between" :style="'height:' + navBarInfo.navBarHeight + 'px;width:' + navBarInfo.navBarWidth + 'px;'">
					<view @click="onLocation" class="flex flex-1 align-center" style="">
						<view style="font-size: 0; padding-left: 24rpx">
							<image style="width: 42rpx; height: 42rpx" src="https://sz.vvv5g.com/assets/img/wxImg/dingwei.png" mode=""></image>
						</view>
						<view class="text-overflow1" style="font-size: 30rpx; color: #333333; width: 88rpx">
							{{ positionText ? positionText : address ? address : '请选择' }}
						</view>
						<view style="font-size: 0">
							<image style="width: 22rpx; height: 22rpx" src="https://sz.vvv5g.com/assets/img/wxImg/downArrow.png" mode=""></image>
						</view>
					</view>
					<!-- <view @click="clickSearch" class="" style="font-size: 0;margin-left: 20rpx;">
						<image style="width: 48rpx;height: 48rpx;"
							src="https://sz.vvv5g.com/assets/img/wxImg/shopSearch.png" mode=""></image>
					</view> -->

					<view class="text-overflow1 flex align-center justify-center" style="font-size: 32rpx; color: #fff" :style="'width:' + navBarInfo.navBarContentWidth + 'px;'">
						<view class="flex align-center" style="background: #fff; border-radius: 32rpx">
							<view
								@click="changeRange(0)"
								style="padding: 12rpx 30rpx; border: 2rpx solid #fff; border-radius: 32rpx; font-size: 28rpx; color: #999"
								:style="rangeIndex == 0 ? 'color:#ffffff;background:#EBBF88;' : ''"
							>
								同城
							</view>
							<view
								@click="changeRange(1)"
								style="padding: 12rpx 30rpx; border: 2rpx solid #fff; border-radius: 32rpx; font-size: 28rpx; color: #999"
								:style="rangeIndex == 1 ? 'color:#ffffff;background:#EBBF88;' : ''"
							>
								全国
							</view>
						</view>
					</view>
				</view>
				<view class="search flex justify-center z-index:9999;">
					<view class="search_box">
						<image style="width: 40rpx; height: 40rpx" src="../../static/fangdajing.png" mode=""></image>
						<div class="line"></div>
						<input v-model="keyword" @input="searchAllList" placeholder="请输入店铺名称" type="text" />
					</view>
				</view>
				<view class="flex" style="margin: 32rpx 72rpx 25rpx 32rpx">
					<scroll-view style="white-space: nowrap; font-size: 0" scroll-with-animation scroll-x="true" :scroll-into-view="'t' + tid">
						<view style="display: inline-block; margin-right: 58rpx" v-for="(item, index) in navsList" :key="index" @click="onActive(item.id)">
							<view :id="'t' + item.id" class="flex flex-column justify-center align-center">
								<view class="flex align-center" :style="navIndex == item.id ? 'font-weight:700;' : ''" style="font-size: 26rpx; color: #fff">
									{{ item.name }}
								</view>
								<view class="" v-if="navIndex == item.id" style="width: 36rpx; height: 6rpx; background: #fff; margin-top: 12rpx"></view>
							</view>
						</view>
					</scroll-view>
					<view class="" @click="onXianS" style="font-size: 0; margin-right: 38rpx">
						<image style="width: 34rpx; height: 34rpx" src="../../static/store/fenglei.png" mode=""></image>
					</view>
				</view>
				<view class="flex align-center justify-around" style="padding-top: 32rpx; padding-bottom: 28rpx; background: #fff; border-radius: 20rpx 20rpx 0 0">
					<view
						class=""
						:style="screenIndex == index ? 'color: #333;font-style: Heavy;' : 'color: #999'"
						style="font-size: 24rpx"
						@click="screenActive(index)"
						v-for="(item, index) in screenList"
						:key="index"
					>
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<view class="" :style="'height:' + topFixedHeight + 'px;'"></view>
		<!-- 筛选弹窗 -->
		<view class="fu_chuang" v-if="show" @click="close">
			<view class="c_fu_chuang mar-auto">
				<view class="c_fu_txt_box flex">
					<view class="list_txt" v-for="(item, index) in navsList" :key="index" @click="fuActive(item.id)">
						<view class="fu_txt s28">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="head_top_box" style="position: fixed;background-color: #EBBE87;z-index: 999999;"> -->
		<!-- <view class="head_top_box" style="background-color: #EBBE87;z-index: 999999;"> -->
		<!-- <view class="header_back w100">
				<image class="w100 h100" src="https://sz.vvv5g.com/assets/img/wx_bj.png" mode=""></image>
			</view> -->
		<!-- <view class="title f500 family" :style="{marginTop: (statusbarHeight - 0 + 44) + 'rpx'}">
				门店
			</view>
			<view class="header_box">
				<input class="uni-input s24 f500 family" @blur="onSearch" v-model="keyWord"
					placeholder-style="color:#ccc;" placeholder="商品名/店铺名/商品种类/关键字" />
				<image class="ipt_sousuo" src="../../static/store/store_sousuo.png" mode=""></image>
				<view class="nav_list flex flexjus">
					<view class="nav_list_box">
						<scroll-view class="scroll-view_H w100" scroll-with-animation scroll-x="true"
							:scroll-into-view="'t' + tid">
							<view class="scroll-view-item_H uni-bg-red" v-for="(item,index) in navsList" :key="index"
								@click="onActive(item.id)">
								<view :id="'t' + item.id"
									:class="[navIndex == item.id ? 'nav_txt_active' : '', 'nav_list_txt', 'txtali']">
									{{item.name}}
								</view>
								<view class="nav_list_botxian" v-if="navIndex == item.id"></view>
							</view>
						</scroll-view>
					</view>
					<view class="fenlei_box" @click="onXianS">
						<image class="w100 h100" src="../../static/store/fenglei.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="list_bottom_box w750">
				<view class="bottom_seater flex">
					<view :class="[screenIndex == index ? 'bot_list_txt_active' : '', 'bot_list_txt','f800','s24']"
						v-for="(item,index) in screenList" :key="index" @click="screenActive(index)">
						{{item.name}}
					</view>
				</view>
			</view>
		</view> -->
		<view class="list_max_box">
			<view class="bot_list_goods_box" v-if="storeList.length > 0" v-for="(item, index) in storeList" @click="onGoods(item.is_photography, item.id, item.shopname)" :key="item.id">
				<view class="flex">
					<view class="portrait">
						<image class="w100 h100" :src="item.avatar_url" mode=""></image>
					</view>
					<view class="right_txtbox">
						<view class="store_name f800 s28">
							{{ item.shopname }}
						</view>
						<view class="goods_num_fangke_num f500 s22 family">商品{{ item.goods }} &nbsp;| &nbsp;访客{{ item.views }}</view>
						<view class="xinxi_phone_img flex">
							<view class="xinxi_img" @click.stop="goPinglun(item.id)">
								<image class="w100 h100" src="../../static/store/xinxi.png" mode=""></image>
							</view>
							<view class="phone_img" @click.stop="onPhone(item.mobile)">
								<image class="w100 h100" src="../../static/store/phone.png" mode=""></image>
							</view>
							<view :class="[item.follow == 0 ? 'guanzhu_btn' : 'guanzhu_btn_active', 's26', 'f500', 'family', 'txtali']" @click.stop="guanZhu(item.id, item.follow, index)">
								{{ item.follow == 0 ? '关注' : '已关注' }}
							</view>
						</view>
					</view>
				</view>
				<view class="bottom_dingwei flex align-center" @click.stop="getOpenLoaction(item.latitude, item.longitude)">
					<view class="weizhi_img" style="font-size: 0">
						<image class="w100 h100" src="../../static/store/dingwei.png" mode=""></image>
					</view>
					<view class="dingwei_txt f500 s22 family">
						<text v-if="item.distance">距离{{ item.distance }}</text>
						<text style="margin-left: 20rpx">{{ item.city }}</text>
					</view>
				</view>
			</view>
			<view class="no_list" v-if="storeList.length == 0">没有更多数据</view>
		</view>
	</view>
</template>

<script>
export default {
	computed: {
		address2() {
			return this.$store.state.getLocation.address2;
		},
		selectedAddress() {
			return this.$store.state.getLocation.selectedAddress;
		},
		// 选择的位置
		positionText() {
			return this.$store.state.getLocation.positionText;
		},
		//选择位置经纬度
		lat() {
			return this.$store.state.getLocation.lat;
		},
		lng() {
			return this.$store.state.getLocation.lng;
		},
		rangeObj() {
			return this.$store.state.getLocation.rangeObj;
		}
	},
	data() {
		return {
			navIndex: 502,
			screenIndex: 0,
			tid: 1,
			keyWord: '',
			show: false,
			storeList: [],
			screenList: [
				{
					name: '综合排序'
				},
				{
					name: '销量'
				},
				{
					name: '口碑'
				},
				{
					name: '距离'
				}
			],
			navsList: [],
			longitude: '',
			latitude: '',
			statusbarHeight: 0,
			navBarInfo: {},
			topFixedHeight: 0,
			rangeIndex: 1, //0 同城 1 全国
			keyword: '',
			address: ''
		};
	},
	onLoad() {
		this.getNavsList();
		this.changeRange(this.rangeObj.shop);
		this.navBarInfo = this.$navBarInfo;
		let that = this;
		setTimeout(() => {
			const query = uni.createSelectorQuery().in(this);
			query
				.select('.topFixed')
				.boundingClientRect((data) => {
					this.topFixedHeight = data.height;
				})
				.exec();
		}, 300);
	},
	onShow() {
		this.address = '定位中';
		this.$getLocation().then((res) => {
			this.$request({
				url: 'common/getLocation',
				data: {
					lat: res.latitude,
					lng: res.longitude
				}
			}).then((jes) => {
				this.address = jes.data.data.address_component.city;
			});
		});
	},
	onPullDownRefresh() {
		this.getStoreData();
	},
	methods: {
		clickSearch() {
			uni.navigateTo({
				url: '/pages/news/sanqi/searchStore'
			});
		},
		changeRange(e) {
			this.rangeIndex = e;
			this.getStoreData();
		},
		// 调取导航
		getOpenLoaction(latitude, longitude) {
			if (!latitude && !longitude) {
				uni.showToast({
					title: '当前店铺未开启定位！',
					icon: 'none'
				});
				return false;
			}
			uni.openLocation({
				latitude: Number(latitude),
				longitude: Number(longitude),
				success: function () {
					return false;
				},
				fail(error) {
					return false;
				}
			});
		},
		// 获取类目列表
		getNavsList() {
			let that = this;
			that
				.$request({
					url: 'common/categoryList'
				})
				.then((res) => {
					if (res.statusCode == 200) {
						res.data.data.unshift({
							name: '全部门店',
							id: 502
						});
						that.navsList = res.data.data;
					}
				});
		},
		// 搜索门店
		onSearch() {
			this.getStoreData();
		},
		searchAllList() {
			this.page = 1;
			this.getStoreData();
		},
		// 获取门店列表
		getStoreData() {
			let that = this;
			let index = that.screenIndex;
			uni.showLoading({
				title: '加载中'
			});
			that.storeList = [];
			let latitude = uni.getStorageSync('location').latitude;
			let longitude = uni.getStorageSync('location').longitude;
			that
				.$request({
					url: 'shop/lists',
					data: {
						cat_id: that.navIndex == 502 ? '' : that.navIndex,
						search: that.keyWord,
						sort: index == 0 ? 'id' : index == 1 ? 'sale' : index == 2 ? 'like' : 'distance',
						new_area: this.rangeIndex == 1 ? '' : this.selectedAddress ? selectedAddress : this.address2 ? this.address2 : '',
						lng: this.lng ? this.lng : longitude ? longitude : 0,
						lat: this.lat ? this.lat : latitude ? latitude : 0,
						// sort: index == 0 ? 'sale' : index == 1 ? 'like' : 'distance'
						is_photography: 2,
						keyword: this.keyword
					}
				})
				.then((res) => {
					uni.hideLoading();
					// that.storeList = res.data.data.data
					let array = [];
					let array1 = [];
					that.totalNum = res.data.current_page;
					that.items = res.data.data.data.map((item, index) => {
						if (item.follow == 1) {
							array.push(item);
						} else {
							array1.push(item);
						}
					});
					that.storeList = [...array, ...that.storeList, ...array1];
					uni.stopPullDownRefresh();
				});
		},
		// 跳转店铺详情
		onGoods(flag, id, name) {
			let shopDetail = {
				shopname: name,
				id: id,
				flag: flag
			};
			let that = this;
			if (flag != 1) {
				uni.navigateTo({
					url: '../filePages/storePages/index'
				});
				that.$store.commit('getDataShop', shopDetail);
			} else {
				that.$store.commit('getDataShopname', shopDetail);
				uni.navigateTo({
					url: '/pages/store/goodsList'
				});
			}
		},
		// 关注/取消关注
		guanZhu(id, follow, index) {
			this.$request({
				url: 'shop/follow',
				method: 'POST',
				data: {
					id: id
				}
			}).then((res) => {
				if (res.statusCode == 200) {
					if (follow == 1) {
						uni.showToast({
							title: '取消关注',
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: '关注成功',
							icon: 'none',
							duration: 2000
						});
						// item.follow = 1
					}
					let pages = getCurrentPages();
					let prePage = pages[pages.length - 1];

					if (prePage.$page.fullPath == '/pages/filePages/storePages/allItems' || prePage.$page.fullPath == '/pages/store/goodsList') {
						prePage.$vm.getShopData(follow);
					}
					this.getStoreData();
				}
			});
		},
		// 二级分类切换
		screenActive(ind) {
			this.screenIndex = ind;
			this.getStoreData();
		},
		// 控制分类开关
		onXianS() {
			this.show = !this.show;
		},
		close() {
			this.show = false;
		},
		// navlist切换门店
		fuActive(id) {
			this.tid = id;
			this.navIndex = id;
			this.show = !this.show;
			this.getStoreData();
		},
		// navlist切换门店
		onActive(id) {
			this.navIndex = id;
			this.tid = id;
			this.getStoreData();
		},
		// 店铺电话btn
		onPhone(data) {
			uni.makePhoneCall({
				phoneNumber: data
			});
		},
		// 去评论
		goPinglun(id) {
			uni.navigateTo({
				url: '/pages/filePages/evaluate/evaluate?shopid=' + id
			});
		},
		onLocation() {
			uni.navigateTo({
				url: '/pages/filePages/onLocation/onLocation'
			});
		}
	}
};
</script>

<style scoped lang="scss">
// 筛选弹窗
.fu_chuang {
	width: 750upx;
	height: 1624upx;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	z-index: 99999;

	.c_fu_chuang {
		width: 686upx;
		background: #ffffff;
		border-radius: 24upx 24upx 24upx 24upx;
		margin-top: 382upx;

		.c_fu_txt_box {
			flex-wrap: wrap;
			padding-top: 34upx;
			padding-bottom: 8upx;

			.list_txt {
				margin-left: 46upx;
				margin-bottom: 30upx;

				.fu_txt {
					color: #333;
				}
			}
		}
	}
}

.store {
	// background-color: #EBBE87;
	// overflow: hidden;

	.list_bottom_box {
		background: #ffffff;
		border-radius: 40upx 40upx 0upx 0upx;
		margin-top: 24upx;
		overflow: hidden;

		.bottom_seater {
			margin-top: 40upx;
			padding-left: 66upx;
			padding-right: 66upx;
			margin-bottom: 40upx;

			.bot_list_txt {
				font-family: PingFang SC-Heavy, PingFang SC;
				color: #999999;
				margin-left: 126upx;
			}

			.bot_list_txt:nth-child(1) {
				margin-left: 0;
			}

			.bot_list_txt_active {
				font-family: PingFang SC-Heavy, PingFang SC;
				color: #333333;
			}
		}
	}

	.list_max_box {
		background-color: #ffffff;
		padding: 30upx 0 30upx 0;
		padding: 0 0 30upx 0;
		// margin-top: 440upx;

		.bot_list_goods_box {
			width: 666upx;
			height: 238upx;
			background: #f4f5f9;
			border-radius: 16upx 16upx 16upx 16upx;
			margin: 20upx auto;
			padding: 20upx 0 0 20upx;

			.portrait {
				width: 160upx;
				height: 160upx;
				border-radius: 16upx 16upx 16upx 16upx;
				overflow: hidden;
			}

			.right_txtbox {
				margin-left: 28upx;

				.store_name {
					font-family: PingFang SC-Heavy, PingFang SC;
					color: #333333;
					margin-top: 8upx;
				}

				.goods_num_fangke_num {
					color: #666666;
					margin-top: 20upx;
				}

				.xinxi_phone_img {
					margin-top: 20upx;

					.xinxi_img {
						width: 54upx;
						height: 54upx;
					}

					.phone_img {
						width: 54upx;
						height: 54upx;
						margin-left: 56upx;
					}

					.guanzhu_btn {
						width: 116upx;
						height: 48upx;
						border-radius: 8upx 8upx 8upx 8upx;
						border: 2upx solid #eb8787;
						color: #eb8787;
						position: absolute;
						margin-top: -24rpx;
						right: 56rpx;
						line-height: 48upx;
					}

					.guanzhu_btn_active {
						width: 116upx;
						height: 48upx;
						border-radius: 8upx 8upx 8upx 8upx;
						background-color: #eb8787;
						color: #fff;
						position: absolute;
						margin-top: -24rpx;
						right: 56rpx;
						line-height: 48upx;
					}
				}
			}

			.bottom_dingwei {
				margin-top: 14upx;

				.weizhi_img {
					width: 26upx;
					height: 26upx;
				}

				.dingwei_txt {
					color: #e29d48;
					margin-top: 4upx;
					margin-left: 8upx;
				}
			}
		}

		.bot_list_goods_box:first-child {
			margin-top: 0upx;
		}

		.no_list {
			text-align: center;
			margin-top: 60%;
		}
	}
	.header_back {
		height: 296upx;
		position: absolute;
	}

	.title {
		font-size: 32upx;
		color: #ffffff;
		text-align: center;
		// margin-top: 64upx;
	}

	.header_box {
		position: relative;
		z-index: 99;

		.uni-input {
			width: 608upx;
			height: 68upx;
			background: #ffffff;
			border-radius: 8upx 8upx 8upx 8upx;
			margin: 48upx auto;
			margin-bottom: 0;
			padding-left: 78upx;
			color: #cccccc;
		}

		.ipt_sousuo {
			width: 40upx;
			height: 40upx;
			position: relative;
			top: -52upx;
			left: 56upx;
		}

		.nav_list {
			margin-top: -16upx;
			padding-left: 36upx;

			.nav_list_box {
				width: 630upx;

				.scroll-view_H {
					white-space: nowrap;

					.scroll-view-item_H {
						display: inline-block;
						margin-left: 58upx;

						.nav_list_txt {
							width: 104upx;
							height: 36upx;
							font-size: 26upx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #ffffff;
						}

						.nav_txt_active {
							font-size: 26upx;
							font-family: PingFang SC-Heavy, PingFang SC;
							font-weight: 800;
							color: #ffffff;
						}

						.nav_list_botxian {
							width: 46upx;
							border-bottom: 6upx solid #ffffff;
							margin: 6upx auto;
						}
					}

					.scroll-view-item_H:nth-child(1) {
						margin-left: 0rpx;
					}
				}
			}

			.fenlei_box {
				width: 34upx;
				height: 34upx;
				margin-right: 30rpx;
				margin-top: 6rpx;
			}
		}
	}
}
.search {
	width: 750rpx;
	height: 64rpx;
	margin-bottom: 24rpx;
	margin-top: 20rpx;
	.search_box {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		width: 642rpx;
		height: 64rpx;
		background: rgba(255, 255, 255, 0.67);
		border-radius: 16px;

		input {
			width: 100%;
			height: 100%;
			font-size: 26rpx;
		}

		.line {
			width: 2rpx;
			height: 20rpx;
			background-color: #e2c194;
			margin: 0 20rpx;
		}
	}
}
</style>
